<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-3" @click="jump('/datahouse')">
                <div class="media">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-checkbox-circle-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>数仓检索</h5>
                    <p class="mb-0">对所有采集数据的管理</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="media selec mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-database-2-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>数仓实例</h5>
                    <p class="mb-0">对所有数据存储实例管理</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3" @click="jump('/datahouse/processing')">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-funds-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>数据处理</h5>
                    <p class="mb-0">对数据处理的策略和接口管理</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3" @click="jump('/datahouse/fuse')">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-align-vertically"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>数据融合</h5>
                    <p class="mb-0">多源实时清洗,同步与集成</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-body">
            <b-tabs justified nav-class="nav-tabs-custom newul" content-class="p-3 text-muted">
              <b-tab active>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="fas fa-home"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">数据实例</span>
                </template>
                <infoFilterAndTable />
              </b-tab>
              <b-tab>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="far fa-envelope"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">数据源</span>
                </template>
                <dataSource />
              </b-tab>
            </b-tabs>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../../layouts/main";
import PageHeader from "@/components/page-header";
import infoFilterAndTable from "./infoFilterAndTable";
import dataSource from "./dataSource";
export default {
  components: { Layout, PageHeader, infoFilterAndTable, dataSource },
  data () {
    return {
      title: "数仓管理",
    }
  },
  methods: {
    jump(url){
      this.$router.push(url)
    }
  }
}
</script>
<style lang="scss" scoped>
.row{
  .col-md-3{
    cursor: pointer;
    .media{
      border-right: 1px solid #eeeeee;
      i,h5,p{
        color: #cccccc;
      }
      p{
        font-size: 0.8rem;
      }
    }
    .selec{
      i{
        color: #5664d2;
      }
      h5{
        color: rgba(0, 0, 0, 0.85);
      }
      p{
        color: #74788d;
      }
    }
  }
  .col-md-3:last-child{
    .media{
      border-right: 0;
    }
  }
}


.card-body ::v-deep .newul{
  display: block;
  li{
    display: inline-block;
    margin: 0 1rem;
    a{
      padding: 0.5rem 0rem;
    }
  }
}
</style>
